<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        var ctx = '';
        var basePath = '/ec-demo';
        var locale = 'zh-cn'
    </script>
    <script src="../../../bower_components/requirejs/require.js" data-main="../../../static/app.js" data-bootstrap-modules="'demo/TestGroupGridModule'"></script>

    <link href="/static/css/default.css" rel="stylesheet" type="text/css">
    <link href="/static/css/iconfont.css" rel="stylesheet" type="text/css">
    <style>
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
            display: none !important;
        }
    </style>
</head>
<body ng-controller="TestGroupGridController" ng-cloak>

    <!--使用数据源-->
    <g-data-source url="data.json" data-source-name="studentsData">
    </g-data-source>


    <!--
        g-group-grid :分组表格指令
        属性：
            group-fields：分组字段名称
            source-name：数据源名称
            on-select：选中某条记录事件，fn(record), 参数为选中行记录

        g-group-coloum: 列定义指令
        属性：
            field：映射字段名称，支持过滤器
            width：宽度
            h-align：表格头对齐方式，取值为：left、center、right
            align：列值对齐方式，取值为：left、center、right

    -->
    <g-group-grid style="margin: 20px auto" group-fields="class,sex" source-name="studentsData"
                  on-select="rowSelected(record)">
        <g-group-coloum field="class" width="40%" >班级</g-group-coloum>
        <g-group-coloum field="name">姓名</g-group-coloum>
        <g-group-coloum field="sex | sexToCn" width="20%" h-align="left"  align="right">性别</g-group-coloum>
        <g-group-coloum field="age">年龄</g-group-coloum>
    </g-group-grid>
</body>
</html>